<template>
  <div class="app-container">
    <el-form>
      <div class="container_style">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handelAdd"
        >
          新增一行
        </el-button>
        <el-table :data="tableData" >
          <el-table-column label="非机构立项项目" align="center">
            <el-table-column label="文件名" width="250px"  prop="fileName" />
            <el-table-column  label="课题申报" >
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.subjectDeclare" />
              </template>
            </el-table-column>
            <el-table-column label="科研快审" >
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.scientificExamine" />
              </template>
            </el-table-column>
            <el-table-column label="医疗新技术" >
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.newTechnologyMedical" />
              </template>
            </el-table-column>
            <el-table-column label="重审审查" >
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.reviewExamine" />
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="机构立项项目" align="center">
            <el-table-column label="项目文件修订" >
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.projectFiles" />
              </template>
            </el-table-column>
            <el-table-column label="方案违背" >
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.schemeAgainst" />
              </template>
            </el-table-column>
            <el-table-column label="年度/定期跟踪审查" >
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.trackReview" />
              </template>
            </el-table-column>
            <el-table-column label="操作" >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="hadleDelete(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
  </div>
</template>

<script>

  export default {
    name: "ConfigFile",
    data() {
      return {
        tableData: [
          {
            fileName: '递交函',
            subjectDeclare: '',
            scientificExamine: '',
            newTechnologyMedical: '',
            reviewExamine: '',
            projectFiles: '',
            schemeAgainst: '',
            trackReview: ''
          }
        ]
      }
    },
    methods: {
      //新增一行
      handelAdd() {
        const table = {
          fileName: undefined,
          subjectDeclare: undefined,
          scientificExamine: undefined,
          newTechnologyMedical: undefined,
          reviewExamine: undefined,
          projectFiles: undefined,
          schemeAgainst: undefined,
          trackReview: undefined,
        };
        this.tableData.push(table);
      },
      //删除
      hadleDelete(row) {
        this.$confirm('确认删除此行内容?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const index = this.tableData.indexOf(row)
          if (index > -1) {
            this.tableData.splice(index, 1)
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
